import { Meta, Props, Story, Preview } from '@storybook/addon-docs/blocks'

<Meta title='Design Systems' />

# Colors: Gray

<Story name='Colors: Gray'>
  {{
    components: {},
    template: `
     <div class="row">
      <div class="col span-2">
        <div class="swatch-dot" style="background: #141419;"></div>
        <p>Dark: Sidebar & Block</p>
        <p>Light: Primary Text</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #1B1C21;"></div>
        <p>Dark: Body Background</p>
        <p>Light: None</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #27292E;"></div>
        <p>Dark: Input Fill</p>
        <p>Light: None</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #4A4B52;"></div>
        <p>Dark: Borders & Buttons</p>
        <p>Light: None</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #6C6C76;"></div>
        <p>Dark: Disabled Text</p>
        <p>Light: Secondary Text</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #B6B6C2;"></div>
        <p>Dark: Secondary Text</p>
        <p>Light: Disabled</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #DCDEE7;"></div>
        <p>Dark: None</p>
        <p>Light: Borders & Buttons</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #EEEFF4;"></div>
        <p>Dark: None</p>
        <p>Light: Input Fill</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #F4F5FA;"></div>
        <p>Dark: None</p>
        <p>Light: Sidebar and Block</p>
      </div>
      <div class="col span-2">
        <div class="swatch-dot" style="background: #FFFFFF;"></div>
        <p>Dark: Primary Text</p>
        <p>Light: Body Background</p>
      </div>
    </div>`
    }}
</Story>

